<template>
    <view>
        <!-- 收货地址 -->
        <view class="revice_address_row">
            <!-- 当收货地址不存在的时候  按钮显示  对象即使是空对象 bool类型也是true -->
            <view class="address_btn" v-if="!address.userName">
                <!-- button plain背景镂空 -->
                <button @click="handleChooseAdress" type="primary" plain>获取收货地址</button>
            </view>

            <!-- 当收货地址存在的时候  详细信息显示 -->
            <view v-else="!address.userName" class="user_info_row">
                <view class="user_info">
                    <view>{{ address.userName }}</view>
                    <view>{{ address.all }}</view>
                </view>
                <view class="user_phone">{{ address.telNumber }}</view>
            </view>
        </view>

        <!-- 购物车内容 -->
        <view class="cart_content">
            <view class="cart_title">购物车</view>
            <view class="cart_main">
                <block v-if="cart.length !== 0">
                    <view class="cart_item" v-for="(item, index) in cart" :key="item.goods_id">
                        <!-- 复选框 -->

                        <view class="cart_chk_wrap">
                            <checkbox-group :data-id="item.goods_id" @change="handeItemChange">
                                <checkbox :checked="item.checked"></checkbox>
                            </checkbox-group>
                        </view>

                        <!-- 商品图片 -->

                        <navigator class="cart_img_wrap">
                            <image class="" :src="item.goods_small_logo" mode="widthFix"></image>
                        </navigator>

                        <!-- 商品信息 -->

                        <view class="cart_info_wrap">
                            <view class="goods_name">{{ item.goods_name }}</view>
                            <view class="goods_price_wrap">
                                <view class="goods_price">{{ item.goods_price }}</view>
                                <view class="cart_num_tool">
                                    <view class="num_edit" @click="handeItemNumEdit" :data-id="item.goods_id" :data-operation="-1">-</view>
                                    <view class="goods_num">{{ item.num }}</view>
                                    <view class="num_edit" @click="handeItemNumEdit" :data-id="item.goods_id" :data-operation="1">+</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <image src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658" mode="widthFix"></image>
                </block>
            </view>
        </view>

        <!-- 底部工具栏 -->
        <view class="footer_tool">
            <!-- 全选 -->
            <view class="all_chk_wrap">
                <checkbox-group @change="handleAllChange">
                    <checkbox :checked="allChecked"></checkbox>
                </checkbox-group>
                全选
            </view>
            <!-- 总价格 -->
            <view class="total_price_wrap">
                <view class="total_price">
                    合计:
                    <text class="total_price_text">￥{{ totalPrice }}</text>
                </view>
                <view>包含运费</view>
            </view>
            <!-- 结算 -->
            <view class="order_pay_wrap" @click="handlePay">结算（{{ totalNum }}）</view>
        </view>
    </view>
</template>

<script>
/**
 * 1.获取用户的收货地址
 *  1.绑定点击事件
 *  2.调用小程序内置api 获取用户的收货地址  wx.chooseAddress
 *  3.获取用户对小程序所授予获取地址的权限状态 scope wx.getSetting
 *   1.假设用户点击获取收货地址的提示框 确定  scope 值 true   authSetting  scope.adress  直接调用收货地址
 *   2.假设用户点击获取收货地址的提示框 取消  scope 值 false
 *   3.假设用户从来没与调用过收货地址的api    scope 值 undefind  获取收货地址
 *      3.1 诱导用户打开授权设置页面(wx.openSetting) 当用户重新给予获取地址权限的时候  获取收货地址
 *   4.把获取到的收货地址存入到本地存储中
 *
 * 2.页面加载完毕之后
 *  1. onLoad onShow
 *  2.获取本地存储中的地址数据
 *  3.把数据设置给data中的一个变量
 *
 * 3.onShow
 *   1.获取缓存中的购物车数组
 *   2.把购物车数据填充到data中
 *
 * 4.全选的实现
 *  1.onshow获取缓存中的购物车数组
 *  2.根据购物车中的商品数据进行计算 所有的商品都被选中 checke=true 全选就被选中
 *
 * 5.总价格和总数量
 *  1.都需要商品
 *
 * 6.全选和反选
 *  1.全选复选框绑定事件  change
 *  2.获取data中的全选变量allChecked
 *  3.直接取反allChecked = !allChecked
 *  4.遍历购物车数组让里面商品状态跟随allChecked改变而改变
 *  5.把购物车数组和allChecked重新设置回data 把购物车重新设置回缓存中
 *
 */
import { getSetting, chooseAddress, openSetting, showModal, showToast } from '../../utils/asyncWx';
import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入1123

export default {
    data() {
        return {
            address: {
                userName: '',
                all: '',
                telNumber: ''
            },
            // 收货地址信息数据
            cart: [],
            // 购物车缓存数据
            allChecked: false,
            totalPrice: 0,
            // 总价格
            totalNum: 0 // 总数量
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // console.log(options)
    },
    // 优化之前的代码
    // handleChooseAdress() {
    //   wx.getSetting({
    //     success: (result)=>{
    //       console.log(result)
    //       // 获取权限状态  如果发现一些属性名很怪异的时候  都要使用[]形式来获取属性值
    //       const scopeAdress = result.authSetting['scope.address']
    //       if(scopeAdress===true || scopeAdress===undefined) {
    //         wx.chooseAddress({
    //           success: (result1)=>{
    //             console.log(result1)
    //           }
    //         })
    //       } else {
    //         // 用户曾经拒绝过授予权限，那么就要诱导用户打开授权界面
    //         wx.openSetting({
    //           success: (result2)=>{
    //             // 可以调取收货地址代码
    //             wx.chooseAddress({
    //               success: (result3)=>{
    //                 console.log(result3)
    //               }
    //             })
    //           },
    //           fail: ()=>{},
    //           complete: ()=>{}
    //         });
    //       }
    //     },
    //     fail: ()=>{},
    //     complete: ()=>{}
    //   });
    // },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        console.log('进入购物车页面了'); // 1.获取缓存中的收货地址信息

        const address = uni.getStorageSync('address');
        this.setData({
            address
        }); // 1.获取缓存中的购物车数据

        const cart = uni.getStorageSync('cart111') || [];
        this.setCart(cart);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 单选
        handeItemChange(e) {
            // 1.获取被修改的商品id
            const goods_id = e.currentTarget.dataset.id;
            console.log(goods_id); // 2.获取购物车数组

            let { cart } = this; // 3.找到被修改的商品对象

            let index = cart.findIndex((item) => item.goods_id === goods_id); // 4.选中状态取反

            cart[index].checked = !cart[index].checked; // 调用公共方法

            this.setCart(cart);
        },

        // 全选
        handleAllChange() {
            let { cart, allChecked } = this;
            console.log(allChecked);
            allChecked = !allChecked;
            cart.forEach((item) => (item.checked = allChecked));
            this.setCart(cart);
            uni.setStorageSync('cart111', cart);
        },

        // 未优化前的购物车数量增加
        // handeItemNumEdit(e) {
        //   const { operation, id } = e.currentTarget.dataset
        //   console.log(operation, id)
        //   const {cart} = this.data
        //   const index = cart.findIndex(item => item.goods_id === id)
        //   if(cart[index].num ===1 && operation === -1) {
        //     wx.showModal({
        //       title: '提示',
        //       content: '您是否要删除？',
        //       success: (res) => {
        //         if (res.confirm) {
        //           console.log('用户点击确定')
        //           cart.splice(index,1)
        //           this.setCart(cart)
        //         } else if (res.cancel) {
        //           console.log('用户点击取消')
        //         }
        //       }
        //     })
        //   }else {
        //     cart[index].num +=operation
        //     this.setCart(cart)
        //   }
        // },
        // es7优化后的购物车数量增减
        async handeItemNumEdit(e) {
            const { operation, id } = e.currentTarget.dataset;
            console.log(operation, id);
            const { cart } = this;
            const index = cart.findIndex((item) => item.goods_id === id);

            if (cart[index].num === 1 && operation === -1) {
                const res = await showModal({
                    content: '您是否要删除?'
                });

                if (res.confirm) {
                    cart.splice(index, 1);
                    this.setCart(cart);
                }
            } else {
                cart[index].num += operation;
                this.setCart(cart);
            }
        },

        // 结算
        async handlePay(e) {
            console.log(e);
            const { address, totalNum } = this;
            console.log(address); // 判断收货地址

            if (!address) {
                const res = await showToast({
                    title: '您还没有选择收货地址'
                });
                console.log(res);
                return;
            } // 判断用户有没有选购商品

            if (totalNum === 0) {
                const res = await showToast({
                    title: '您还没有选购商品!'
                });
                console.log(res);
                return;
            } // 如果正常 则跳转到支付页面

            uni.navigateTo({
                url: '/pages/pay/index',
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
        },

        //  try catch处理报错 {"errMsg":"chooseAddress:fail auth deny"}
        // es7优化之后的代码
        async handleChooseAdress() {
            try {
                // 1.获取权限状态
                const res1 = await getSetting();
                console.log(res1);
                const scopeAdress = res1.authSetting['scope.address']; // true/false

                console.log(scopeAdress); // 2.判断权限状态

                if (scopeAdress === false) {
                    // 3.调用获取收货地址的代码api
                    await openSetting();
                } // 先诱导用户打开授权页面
                // 4.调用收货地址的api

                const res2 = await chooseAddress();
                console.log(res2);
                res2.all = res2.provinceName + res2.cityName + res2.countyName + res2.detailInfo; // 5.存入到缓存中

                uni.setStorageSync('address', res2);
            } catch (error) {
                // console.log(error)
            }
        },

        // 对单选全选/商品价格合计/结算数量的处理
        setCart(cart) {
            let allChecked = cart.length ? cart.every((item) => item.checked) : false; // 细节注意: 空数组调用every，返回值就是true

            console.log(allChecked);
            let totalNum = 0; // 总数量

            let totalPrice = 0; // 总价格

            cart.forEach((item) => {
                if (item.checked) {
                    totalPrice += item.num * item.goods_price;
                    totalNum += item.num;
                } else {
                    allChecked = false;
                }
            });
            this.setData({
                cart,
                allChecked,
                totalPrice,
                totalNum
            }); // console.log(this.data.allChecked)

            uni.setStorageSync('cart111', cart); // console.log(this.data.address)
            // console.log(this.data.cart)
        }
    }
};
</script>
<style>
@import './index.css';
</style>
